<template>
  <div class="notebox">
    <div class="noteheader">
      <div class="textbox">
        <div class="textcontent">
          <div class="text1" style="font-weight: 800; color: white; font-size: 40px;width: 100%;text-align: center;">应
            聘 窗 口</div>
          <div class="text1" style="color: white;width: 100%;text-align: center;">西藏藏聘人力资源管理平台</div>
        </div>
      </div>
    </div>
    <div class="pid" style="margin: 20px;">
      <div class="notecontent">

        <el-form :label-position="labelPosition" label-width="100px" :model="Data" :rules="rules" ref="Data">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="Data.name"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="Data.sex" placeholder="请选择" style="width:100%">
              <el-option v-for="item in Sexoptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="Data.age"></el-input>
          </el-form-item>
          <el-form-item label="民族" prop="nation">
            <el-input v-model="Data.nation"></el-input>
          </el-form-item>
          <el-form-item label="籍贯" prop="nativeplace">
            <el-input v-model="Data.nativeplace"></el-input>
          </el-form-item>
          <el-form-item label="毕业院校" prop="institutions">
            <el-input v-model="Data.institutions"></el-input>
          </el-form-item>

          <el-form-item label="所学专业" prop="major">
            <el-input v-model="Data.major"></el-input>
          </el-form-item>
          <el-form-item label="学历" prop="degree">
            <el-select v-model="Data.degree" placeholder="请选择" style="width:100%">
              <el-option v-for="item in Degreeoptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="求职意向" prop="intension">
            <el-input v-model="Data.intension"></el-input>
          </el-form-item>
          <el-form-item label="期望薪资" prop="salary">
            <el-input v-model="Data.salary"></el-input>
          </el-form-item>
          <el-form-item label="电子邮箱" prop="email">
            <el-input v-model="Data.email"></el-input>
          </el-form-item>
          <el-form-item label="获取的职(执)业资格证书" prop="certificate">
            <el-input v-model="Data.certificate"></el-input>
          </el-form-item>
          <el-form-item label="工作经历" prop="resume">
            <el-input maxlength="200" :autosize="{ minRows: 6, maxRows: 30}"
  show-word-limit type="textarea" v-model="Data.resume"></el-input>
          </el-form-item>
        </el-form>

        <div class="send">
          <el-button @click="submitForm('Data')" style="width:99%;margin:30px auto" type="primary">投递<i
              class="el-icon-upload el-icon--right"></i></el-button>
        </div>

      </div>
    </div>
  </div>
</template>
  
<script >
export default {
  data() {
    var checkAge = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("请填写年龄"));
      }
      setTimeout(() => {
        if (!/(^\d{1,2}$)/.test(value)) {
          callback(new Error("年龄有误"));
        }
        else {
          callback();
        }
      }, 1000);
    };
    return {
      
      loading: false,//按钮加载状态
      Degreeoptions: [{
        value: '高中及以下',
        label: '高中及以下'
      }, {
        value: '专科',
        label: '专科(含中专高职)'
      },
      {
        value: '本科',
        label: '本科'
      },
      {
        value: '研究生及以上',
        label: '研究生及以上'
      }
      ],
      Degreevalue: '',//学历
      Sexoptions: [{
        value: '男',
        label: '男'
      }, {
        value: '女',
        label: '女'
      }],
      Sexvalue: '',
      labelPosition: 'top',
      Data: {
        name: "",
        phone: "0000",
        sex: "",
        age: "",
        nation: "",
        degree: "",
        institutions: "",
        major: "",
        intension: "",
        salary: "",
        email: "",
        certificate: "",
        resume: "",
        nativeplace: "",
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' },
          { min: 2, max: 4, message: '长度在 2 到 4 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择性别', trigger: 'change' }
        ],
        age: [
          {  validator: checkAge,required: true, trigger: 'blur' }
        ],
        nation: [
          { required: true, message: '请填写民族', trigger: 'blur' }
        ],
        degree: [
          { required: true, message: '请选择学历', trigger: 'change' }
        ],
        institutions: [
          { required: true, message: '请填写毕业院校',  trigger: 'blur'  }
        ],
        major: [
          { required: true, message: '请填写专业', trigger: 'blur' }
        ],
        salary: [
          { required: true, message: '请填写期望薪资', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请填写电子邮箱', trigger: 'blur' }
        ],
        certificate: [
          { required: true, message: '请填写证书(没有则填无)', trigger: 'blur' }
        ],
        resume: [
          { required: true, message: '请填写工作经历', trigger: 'blur' }
        ],
        intension: [
          { required: true, message: '请填写求职意向', trigger: 'blur' }
        ],
        nativeplace: [
          { required: true, message: '请填写籍贯', trigger: 'blur' }
        ],
      }
    };
  },
  mounted() {

    this.$nextTick(() => {

      console.log("投递简历");
      var info = JSON.parse(localStorage.getItem("info"))
      if (info) {
        this.Data.phone = info.phone
      }

    })
  },
  methods: {
    
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //所有表单验证成功逻辑
          console.log(this.Data);
          var that = this;
          that.loading = true
          that.$axios
            .post("/api/Notes/addNote", {
              name: that.Data.name,
              phone: that.Data.phone,
              sex: that.Data.sex,
              age: that.Data.age,
              nation: that.Data.nation,
              degree: that.Data.degree,
              institutions:that.Data.institutions,
              major: that.Data.major,
              intension: that.Data.intension,
              salary:that.Data.salary,
              email: that.Data.email,
              certificate:that.Data.certificate,
              resume: that.Data.resume,
              nativeplace: that.Data.nativeplace,
            })
            .then(function (response) {
              that.loading = false
              console.log(response);
              if (response.data.code == 200) {
                that.$router.push("/success");
              } else {
                that.$message.error(response.data.mes);
              }

            })
            .catch(function (error) {
              that.$message.error("网络链接超时");
              that.loading = false
            });

        } else {
          this.$message.warning("填写格式不正确");
          return false;
        }
      });
    },
  },
};
</script>
  
<style>
.notebox {
  width: 100%;
}


.noteheader {
  width: 100%;
  height: 180px;
  position: fixed;
  /* 设置fixed固定定位 */
  z-index: 999;
  top: 0px;
  background-color: rgb(69, 172, 251);
}

.notecontent {
  position: relative;
  top: 180px;

  width: 98%;
}

.textcontent {
  position: absolute;
  width: 200px;
  height: 100px;

  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;

}
</style>
  